<!--
功能：二维码
作者：Maoxiangdong
邮箱：862755519@qq.com
时间：2023-11-23 17:24:32
-->
<template>
  <div class="page-container">
    <PageTitle
      title="二维码生成"
      subTitle="简单二维码生成案例，更多api请参考官方文档：https://www.antdv.com/components/qrcode-cn"
    ></PageTitle>
    <a-row :gutter="10" style="margin-top: 10px;">
      <!-- 二维码 -->
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>普通二维码</span>
            </div>
          </div>
          <div class="page-card-content">
            <a-qrcode :value="text" />
            <a-input
              v-model:value="text"
              style="margin-top: 15px; text-align: center"
              placeholder="-"
              :maxlength="60"
            />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>带LOGO的二维码</span>
            </div>
          </div>
          <div class="page-card-content">
            <a-qrcode
              error-level="H"
              value="https://www.antdv.com"
              icon="https://www.antdv.com/assets/logo.1ef800a8.svg"
            />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>彩色二维码</span>
            </div>
          </div>
          <div class="page-card-content">
            <a-qrcode
              value="http://www.antdv.com"
              color="#19be6b"
            />
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <div class="page-card">
          <div class="page-card-header">
            <div class="page-card-header-left">
              <span>下载二维码</span>
            </div>
          </div>
          <div class="page-card-content">
            <a-qrcode ref="qrcodeCanvasRef" value="http://www.antdv.com" />
            <a-button type="primary" @click="dowloadChange" style="width: 160px; margin-top:15px;">下载二维码</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const text = ref('https://www.antdv.com/')
const qrcodeCanvasRef = ref();
const dowloadChange = async () => {
  const url = await qrcodeCanvasRef.value.toDataURL();
  const a = document.createElement('a');
  a.download = 'QRCode.png';
  a.href = url;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};
</script>
<style lang="scss" scoped>
.page-container {
  .page-card {
    width: 100%;
    height: 285px;
    border-radius: 4px;
    background-color: #ffffff;
    margin-bottom: 10px;
    box-shadow: 0 0 6px 0 rgba(51, 51, 51, 0.08);
    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      border-bottom: 1px solid #e8eaec;
      font-size: 15px;
      color: #515a6e;
    }
    &-content {
      padding: 15px;
      display: flex;
      align-items: center;
      flex-direction: column;
    }
  }
}
</style>
